Component({
  properties: {
    // 图片地址（同Vue组件）
    src: {
      type: String,
      value: ''
    },
    // 宽度（同Vue组件）
    width: {
      type: String,
      value: ''
    },
    // 高度（同Vue组件）
    height: {
      type: String,
      value: ''
    },
    // 预览图列表（同Vue组件）
    previewSrcList: {
      type: Array,
      value: []
    }
  },
  
  data: {
    realSrc: '',        // 实际显示的图片地址
    realWidth: '100%',  // 转换后的宽度
    realHeight: 'auto', // 转换后的高度
    realSrcList: [],    // 预览图片列表
    isLoading: true,    // 图片加载中状态
    isError: false      // 图片加载失败状态
  },
  
  lifetimes: {
    attached() {
      this.processProperties();
    }
  },
  
  observers: {
    'src, width, height, previewSrcList': function() {
      this.processProperties();
    }
  },
  
  methods: {
    // 处理组件属性
    processProperties() {
      const app = getApp();
      
      // 处理宽度
      let realWidth = this.data.width;
      if (!isNaN(this.data.width)) {
        realWidth = this.data.width + 'px';
      } else if (this.data.width && !this.data.width.includes('px') && !this.data.width.includes('%') && !this.data.width.includes('rpx')) {
        realWidth = this.data.width + 'px';
      }
      
      // 处理高度
      let realHeight = this.data.height;
      if (!isNaN(this.data.height)) {
        realHeight = this.data.height + 'px';
      } else if (this.data.height && !this.data.height.includes('px') && !this.data.height.includes('%') && !this.data.height.includes('rpx')) {
        realHeight = this.data.height + 'px';
      }
      
      // 处理图片地址（外部链接处理）
      const processUrl = (url) => {
        if (!url) return '';
        
        // 判断是否为外部链接
        const isExternal = /^(https?:|mailto:|tel:)/.test(url);
        if (isExternal) {
          return url;
        }
        
        // 从全局配置中获取baseUrl
        const baseUrl = app.globalData.baseUrl || '';
        console.log(baseUrl + url);
        return baseUrl + url;
      };
      
      // 处理主图片
      let realSrc = '';
      if (this.data.src) {
        // 分割字符串，原组件支持逗号分隔的多个图片
        const srcArray = this.data.src.split(',');
        realSrc = processUrl(srcArray[0]);
      }
      
      // 处理预览图列表
      let realSrcList = [];
      if (this.data.previewSrcList.length > 0) {
        realSrcList = this.data.previewSrcList.map(processUrl);
      } else if (this.data.src) {
        const srcArray = this.data.src.split(',');
        realSrcList = srcArray.map(processUrl);
      }
      console.log({
        realSrc,
        realWidth,
        realHeight,
        realSrcList,
        isLoading: true,
        isError: false
      });
      this.setData({
        realSrc,
        realWidth,
        realHeight,
        realSrcList,
        isLoading: true,
        isError: false
      });
    },
    
    // 图片加载完成
    onImageLoad() {
      this.setData({
        isLoading: false,
        isError: false
      });
    },
    
    // 图片加载失败
    onImageError(e) {
      console.log("加载失败", e);
      this.setData({
        isLoading: false,
        isError: true
      });
    },
    
    // 预览图片
    onPreviewImage() {
      if (this.data.realSrcList.length === 0) return;
      wx.previewImage({
        current: this.data.realSrc,  // 当前显示图片链接
        urls: this.data.realSrcList   // 需要预览的图片链接列表
      });
    }
  }
});